<template>
    <section class="contact">
        <h1 class="title">联系我们</h1>
        <div class="box-container">
            <div id="container" class="map"></div>
            <form>
                <h3>取得联系</h3>
                <div class="inputBox">
                    <input type="text" placeholder="name">
                </div>
                <div class="inputBox">
                    <input type="email" placeholder="email">
                </div>
                <div class="inputBox">
                    <textarea placeholder="message" rows="10" class="box"></textarea>
                </div>
                <span class="btn">提交</span>
            </form>
        </div>
    </section>

</template>

<script setup>
import { onMounted } from "vue";

</script>

<style lang="scss" scoped>
section {
    padding: 2rem 7%;
}

.contact .title {
    margin-bottom: 2rem;
    text-align: center;
    margin-top: 8rem;
    font-size: 3.5rem;
    color: #808080;
}

.contact .box-container {
    display: flex;
    flex-wrap: wrap;
    padding: 1rem 3rem;
    gap: 1rem;
}

.contact .box-container .map {
    flex: 1 1 45rem;
    width: 100%;
    object-fit: cover;
    height: 54rem;
    background: url("@/assets/image/hcf.jpeg") no-repeat;
    background-size: cover;
}

.contact .box-container form {
    flex: 1 1 45rem;
    padding: 2rem 3rem;
    background: #808080;
    background-size: cover;
    text-align: center;
}

.contact .box-container form h3 {
    font-size: 2.5rem;
    color: #fff;
}

.contact .box-container form .inputBox {
    display: flex;
    align-items: center;
    margin: 2rem 0;
    border: .1rem solid #222;
}

.contact .box-container form .inputBox input {
    width: 100%;
    font-size: 1.2rem;
    text-transform: lowercase;
    padding: 1.2rem 1rem;
}

.contact .box-container form .inputBox textarea {
    font-size: 1.2rem;
    width: 100%;
    text-transform: none;
    padding: .5rem 1rem;
    resize: none;
}

.contact .box-container form .btn {
    padding: 1rem 2rem;
    display: block;
    font-size: 1.4rem;
    text-align: center;
    cursor: pointer;
    margin: 0 auto;
    width: 15rem;
    background: #b57200;
    color: #fff;
}

.contact .box-container form .btn:hover {
    background-color: #222;
}
</style>